<template>
    <div class="detail_module_panel work_student">
        <h3 id="work_student" class="detail_panel_title detail_panel_title_icon work_student_icon">
            {{ $t('common.workInformation') }}</h3>
        <div class="panel_info_content">
            <el-row>
                <!--工作信息start-->
                <el-col :span="12">
                    <el-row class="row">
                        <el-col class="label" :span="8">
                            <div class="panel_info_content_title"><i class="dot"></i>{{ $t('common.workInformation') }}
                            </div>
                        </el-col>
                        <el-col v-if="isAuditing" :span="16">
                            <el-button @click="showWorkInfoDialog=true" type="primary" size="mini">{{ $t('common.modify') }}</el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.careerType') }}</el-col>
                        <el-col class="info" :span="16">{{ userData.jobType }}</el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.corpName') }}</el-col>
                        <el-col class="info" :span="16">{{ userData.companyName }}
                            <el-button v-if="userData.companyName" @click="searchWords(userData.companyName)"
                                       type="text" icon="search" size="mini">{{ $t('common.positiveCheck') }}
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.corpAddress') }}</el-col>
                        <el-col class="info" :span="16">{{ companyAddress }}</el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.currPosition') }}</el-col>
                        <el-col class="info" :span="16">{{ userData.position | switchPosition }}</el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.corpPhone') }}</el-col>
                        <el-col class="info" :span="16">
                            <button @click="call(userData.companyTel)" class="btn-call"
                                    :disabled="!orderId || isCalling">{{ userData.companyTel }}
                            </button>
                            <!--<hide-phone-num :phone="userData.companyTel"></hide-phone-num>&lt;!&ndash;脱敏显示电话号码&ndash;&gt;-->
                            <el-button v-if="userData.companyTel" @click="searchWords(userData.companyTel)" type="text"
                                       icon="search" size="mini">{{ $t('common.negativeCheck') }}
                            </el-button>
                            <!--<el-button v-if="userData.companyTel" @click="$call(userData.companyTel)" class="btn_call_center" type="text" icon="el-icon-phone">Call</el-button>-->
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.payInterval') }}</el-col>
                        <el-col class="info" :span="16">{{ userData.payCycle | switchPayInterval }}</el-col>
                    </el-row>
                    <el-row class="row" v-if="userData.payCycle && userData.payCycle !== 'Daily'">
                        <el-col class="label" :span="8">{{ $t('common.payDay') }}</el-col>
                        <el-col class="info" :span="16">
                            <span>{{ userData.payDay.split(',')[0] }}</span>
                            <span v-if="userData.payCycle === 'Once two weeks'">,{{
                                    userData.payDay.split(',')[1]
                                }}</span>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{ $t('common.monthlyIncome') }}</el-col><!--月收入-->
                        <el-col class="info" :span="16">{{ userData.salary }}</el-col>
                    </el-row>
                </el-col><!--工作信息end-->
            </el-row>
            <!--照片start-->
            <el-row class="row work_student_img">
                <el-col class="label" :span="4">{{ $t('common.workCertification') }}</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <a @click="showImg(userData.payImg)" :style="backgroundImg(userData.payImg)"
                               href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.payrollPhoto') }}</span>
                        </li><!--工资单照片-->
                        <li>
                            <a @click="showImg(userData.workerImg)" :style="backgroundImg(userData.workerImg)"
                               href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.employeePhoto') }}</span>
                        </li><!--员工照-->
                        <li>
                            <a @click="showImg(userData.employeeIdImg)" :style="backgroundImg(userData.employeeIdImg)"
                               href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.employeePhotoAdd') }}</span>
                        </li><!--Employee ID -->
                        <li>
                            <a @click="showImg(userData.businessLicenseImg)"
                               :style="backgroundImg(userData.businessLicenseImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.businessPermit') }}</span>
                        </li><!--营业执照-->
                    </ul>
                </el-col>
            </el-row>
        </div>
        <show-image-video :visible.sync="showImgDialog" :img-src="imgUrl">图片展示</show-image-video>

        <!--修改工作信息弹框-->
        <work-info :visible.sync="showWorkInfoDialog" :work-info="userData" :user-id="userId" @updateData="updateData"></work-info>
    </div>
</template>

<script>
import ShowImageVideo from '@/components/show-image-video';
import WorkInfo from './components/work-info';

let that = null;
export default {
    name: 'workStudent',
    props: {
        userData: {
            type: Object
        },
        isCalling: {
            type: Boolean
        },
        isAuditing: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        ShowImageVideo,
        WorkInfo,
    },
    data() {
        return {
            userId: '',
            orderId: '',
            showImgDialog: false,
            imgUrl: '',
            showWorkInfoDialog: false,
        };
    },
    computed: {
        companyAddress() {
            let address = '';
            const jobInfo = this.userData;
            if (jobInfo.province) {
                address = jobInfo.district + ' ' + jobInfo.province + ' ' + jobInfo.city + ' ' + jobInfo.address;
            }
            return address;
        },
    },
    methods: {
//        正查反查
        searchWords(words) {
            this.$openNewBlank('https://www.google.com/search?q=' + encodeURIComponent(words));
        },
        backgroundImg(url) {
            // 构造图片展示
            const style = {};
            if (url) {
                style.backgroundImage = 'url("' + url + '")';
            }
            return style;
        },
        showImg(url) {
            if (url) {
                this.showImgDialog = true;
                this.imgUrl = url;
            }
        },
        call(number) {
            this.$emit('call', number);
        },
        updateData(type) {
            this.$emit('updateData', type);
        },
    },
    filters: {
        switchPosition(type) {
            switch (type) {
                case 'Staff':
                    return that.$t('common.position.Staff');// 员工
                case 'Team Leader':
                    return that.$t('common.position.TeamLeader');// 领导
                case 'Manager':
                    return that.$t('common.position.Manager');// 经理
                case 'Senior Manger':
                    return that.$t('common.position.SeniorManger');// 高级经理
                case 'Owner':
                    return that.$t('common.position.Owner');// 老板
                default:
                    return type;
            }
        },
        switchPayInterval(type) {
            switch (type) {
                case 'Once two weeks':
                    return that.$t('common.payIntervalData.OnceEveryTwoWeeks');// 每两周一次
                case 'Monthly':
                    return that.$t('common.payIntervalData.OnceEveryMonth');// 每月一次
                case 'Weekly':
                    return that.$t('common.payIntervalData.OnceEveryWeek');// 每周一次
                case 'Daily':
                    return that.$t('common.payIntervalData.Everyday');// 每天
                default:
                    return type;
            }
        },
    },
    created() {
        that = this;
        // console.log('-------------->');
        // console.log(this.userData);
        this.orderId = this.$route.params.orderId;
        this.userId = this.$route.params.id;
    }
};
</script>

<style lang="scss" scoped>
.work_student_img {
    margin-top: 12px;
}

.row_course .info.el-col.el-col-16 {
    word-wrap: break-word;
    word-break: normal;
}

.el-button {
    margin-left: 10px;
    /*border-radius: 8px;*/
}
</style>
